<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {

        var tbl = $("#nasdaq_market_table");
        var obj = $.paramquery.tableToArray(tbl);

        var newObj = {             
            title: "Companies listed on the <b>NASDAQ</b>",
            resizable: true,             
            showBottom: false,
            selectionModel: {type:'cell', mode:'block'},
            dataModel: { data: obj.data, sortIndx: 0 },
            columnTemplate: {editable: false},
            colModel: obj.colModel
        };
        
        $.extend(newObj.colModel[0], { width: 220 });
        $.extend(newObj.colModel[1], { width: 100 });
        $.extend(newObj.colModel[2], { hidden: true });
        $.extend(newObj.colModel[3], {            
            render: function (ui) {
                var rowData = ui.rowData,
                    dataIndx = ui.dataIndx;

                rowData.pq_cellcls = rowData.pq_cellcls || {};
                if (rowData[4] < 0) {//if change is negative.
                    rowData.pq_cellcls[dataIndx] = 'yellow';
                    return "<img src='/Content/images/arrow-us-down.gif'/>&nbsp;" + rowData[3];
                }
                else { //if change >= 0
                    rowData.pq_cellcls[dataIndx] = 'pink';
                    return "<img src='/Content/images/arrow-us-up.gif'/>&nbsp;" + rowData[3];
                }
            }, width: 100
        });
        $.extend(newObj.colModel[4], { width: 120, editable: true });
        $.extend(newObj.colModel[5], { width: 120 });
        $.extend(newObj.colModel[6], { width: 166 });

        //update price cell when change cell is updated.
        newObj.cellSave = function (evt, ui) {
            if (ui.dataIndx == 4) {
                $(this).pqGrid("refreshCell", { rowIndx: ui.rowIndx, dataIndx: 3 });
            }
        };
        var $grid = $("#grid_render_cells").pqGrid(newObj);
    });
        
</script>    
</head>
<body>

<div id="grid_render_cells" style="margin:auto;"></div>

</body>

</html>
